<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="http://s.kaixin001.com.cn/css/kxcommon-024090dd3.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.photo-view-mask {
				overflow:hidden;
				-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6FCFCFC, endColorstr=#E6FCFCFC)";
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6FCFCFC, endColorstr=#E6FCFCFC);
			}
			/*panel*/
			.panel {z-index:299;position:absolute;text-align:left;top:0;left:0;}
			.panel .hd {zoom:1;width:auto;}
			.panel .co1,.panel .co2,.panel .cue,.panel .sd,.panel .close,.panel .resize {z-index:3;}
			.panel .close {cursor:pointer;}
			.panel .resize {position:absolute;right:0;bottom:0;width:10px;height:10px;}
			.panel .panel-iframe {
				width:100%;
				height:100%;
				_height:3000px;
				position:absolute;
				top:0;
				left:0;
				z-index:0;
				filter:alpha(opacity=0);
				-ms-filter:alpha(opacity=0);
			}
			.panel .sd {background:none;padding:0;}


			/*panel-t2*/
			.panel-t2 {position:absolute;zoom:1;z-index:0;overflow:hidden;}
			.panel-t2 .panel-content{position:relative;z-index:2;background-color:#fff;margin:1px;}
			.panel-t2 .panel-content .bd{}
			.panel-t2 .sd{background-color:#cecece;width:100%;height:100%;_height:3000px;z-index:-1;position:absolute;top:0;}
			.panel-t2 .close{font-weight:bold;position:absolute;top:15px;right:15px;width:11px;height:11px;background:url(ico-close.png) no-repeat;}
		</style>
		<script src="http://s.kaixin008.com.cn/js/base/Haibei.js"></script>
        <script src="http://s.kaixin008.com.cn/js/core/jQuery.js"></script>
		<script type="text/javascript" src="http://s.kaixin008.com.cn/js/core/panel/Panel.js"></script>
		<script type="text/javascript" src="http://s.kaixin008.com.cn/js/core/panel/Mask.js"></script>
		<script type="text/javascript" src="http://s.kaixin008.com.cn/js/core/panel/GDialog.js"></script>
	</head>
	<body>
		<h1>GDialog测试</h1>
		<style type="text/css">
			.cls{zoom:1;}
			.cls:after{content:'.';display:block;height:0;visibility:hidden;clear:both;}
			.args{background:#eee;padding:10px 0 10px 50px;border-bottom:1px solid #999;margin-top: 20px;}
			.args li{margin: 5px;list-style:none;}
			.args li .k{display:inline-block;width: 100px;text-align:right;padding-right:5px;}

			/*application*/
			.theater-mode{
				overflow: hidden;
			}

			.theater-mode body{
				overflow: hidden;
			}
			
			.theater-mode .photo-view-mask{
				overflow-y: scroll;
			}

			/*content*/
			.photo-content{
				padding: 10px;
			}

			.photo-content .photo-view{
				height: 538px;
				background: #F6F6F6;
				padding-top: 20px;
				padding-left: 84px;
				position: relative;
			}

			.photo-content .arrow{
				top: 234px;
				position: absolute;
			}

			.photo-content .arrow-left{
				left: 12px;
			}
			.photo-content .arrow-right{
				right: 12px;
			}

			.photo-content .photo-action{
				text-align: right;
				padding-right: 84px;
			}
		</style>
		<div class="args">
			<h3>参数</h3>
			<ul>
				<li class="cls">
					<span class="k"><label>Left:</label></span><span class="v"><input id="leftVal" value="0"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Top:</label></span><span class="v"><input id="topVal" value="0"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Height:</label></span><span class="v"><input id="heightVal" value="none"></span>
				</li>
				<li class="cls">
					<span class="k"><label>Width:</label></span><span class="v"><input id="widthVal" value="967"></span>
				</li>
				<li class="cls">
					<span class="k"><label>是否居中:</label></span>
					<span class="v">
						<select id="atCenterVal"><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>是否使用iframe:</label></span>
					<span class="v">
						<select id="useIframeVal"><option value="2">自动</option><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>是否使用mask:</label></span>
					<span class="v">
						<select id="useMaskVal"><option value="1">是</option><option value="0">否</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label>标题:</label></span><span class="v"><input id="titleVal" value=""></span>
				</li>
				<li class="cls">
					<span class="k"><label>内容:</label></span>
					<span class="v">
					<textarea id="contentVal" cols="40">
						<div class="photo-content">
							<div class="photo-view">
								<a class="arrow arrow-left" href="#"><img src="ico-arrow-left.png"></a>
								<a class="arrow arrow-right" href="#"><img src="ico-arrow-right.png"></a>
								<div class="photo-img">
									<img src="photo_demo.png">
									<div class="photo-action">
										<a class="action action-open" href="#"><img src="ico-open.png"></a>
										<a class="action action-zoomin" href="#"><img src="ico-zoomin.png"></a>
										<a class="action action-zoomout" href="#"><img src="ico-zoomout.png"></a>
									</div>
								</div>
							</div>
							<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了
							<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了
							<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了
							<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了
							<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了
							<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了<br>评论啊啥的内容都在这里了
						</div>
					</textarea>
				</span>
				</li>
				<li class="cls">
					<span class="k"><label>样式:</label></span>
					<span class="v">
						<select id="classNameVal"><option value="panel-t2">panel-t2</option></select>
					</span>
				</li>
				<li class="cls">
					<span class="k"><label></label></span>
					<span class="v">
						<button id="showDialog">Show</button>&nbsp;&nbsp;<button id="hideDialog">Hide</button>
					</span>
				</li>
			</ul>
		</div>	
		内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
		内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
		
	</body>
	<script type="text/javascript">
	

		K.App('ADialogTest',['core/panel/GDialog','jQuery']).define({
			main: function(){
				var Dialog = this.require( 'core/panel/GDialog' ),
					$ = this.require( 'jQuery' );
				window.$ = $;
				
				function getOpts(){
					var optArr = 'top,left,width,atCenter,useIframe,useMask,title,className,content'.split(','),
						opts = {};
					K.forEach(optArr, function(opt){
						var val = $('#' + opt + 'Val').val();
						if( opt == 'top' || opt == 'left' || opt == 'height' || opt == 'width' ){
							val = parseInt( val );
						}
						if( opt == 'atCenter' || opt == 'useMask' ){
							val = !!parseInt( val );
							opts[ opt ] = val;
						}
						else if( opt == 'useIframe' ){
							val = parseInt( val );
							if( val != 2 ){
								val = !!val;
								opts[ opt ] = val;
							}
						}
						else{
							opts[ opt ] = val;
						}
					});
					return opts;
				}				
				
				$('#showDialog').click(function(){ 
					var opts = getOpts();
					opts.embedMask = true;
					opts.maskOption = {
						topOffset: 0,
						bottomOffset: 0,
						MASK_CLASS: 'photo-view-mask'
					};

					window.dlg = new Dialog( opts );

					window.dlg.on( 'aftershow', function(){
						$( 'html' ).addClass( 'theater-mode' );
						window.dlg.setStyle( 'top', 0 );
					} );

					window.dlg.on( 'afterhide', function(){
						$( 'html' ).removeClass( 'theater-mode' );
					} );

					window.dlg.show();
				});
				$('#hideDialog').click(function(){ window.dlg.hide();});
			}
		});
	//]]>
	</script>
</html>
